<script setup>
import { ref, computed } from "vue";
const opt = ref("+");
const one = ref(1);
const two = ref(2);

const res = computed(() => {
  if (opt.value === "+") {
    return +one.value + +two.value;
  } else if (opt.value === "-") {
    return one.value - two.value;
  } else if (opt.value === "*") {
    return one.value * two.value;
  } else {
    return one.value / two.value;
  }
});
</script>

<template>
  <div>
    <input type="text" v-model="one" style="height: 40px" />
    <select :label="opt" v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="two" style="height: 40px" /> = {{ res }}
  </div>
</template>

<style lang="scss" scoped></style>
